<!--
 *@开发者: 刘翔
 *@创建时间: 2024-04-24 15:03:20
 *@描述:医院整体运营指标
!-->
<template>
	<div class="page-tile-4">
		<div class="page-tile-4-left">
			<div class="title-box">
				<div class="title-box-1">大类</div>
				<div class="title-box-2">指标</div>
				<div class="title-box-3">值</div>
			</div>
			<div class="title-content-box">
				<div
					class="title-content"
					v-for="(item, index) in formData"
					:key="index"
				>
					<div class="title-content-name">{{ item.name }}</div>
					<div class="title-content-list-box">
						<div
							:style="{
								background:
									index2 % 2 === 0 ? '#fff' : '#edeced'
							}"
							class="title-content-list"
							v-for="(item2, index2) in item.list2"
							:key="index2"
						>
							<div class="title-content-list-1-item">
								{{ item2 }}
							</div>
							<div class="title-content-list-2-item">
								{{ item.list3[index2] }}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="page-tile-4-right">
			<div class="formula-description-top">
				<div>公式说明:</div>
				<div>① 权重(RW) = 地区DRG均费/地区均费;</div>
				<div>② CMI = 总权重/ 入组病例数;</div>
				<div>③ DRG总权重= ∑(入组患者RW);</div>
				<div>④ 药占比=药品费/医疗总费用；其中药品费不含中草药;</div>
				<div>⑤ 耗占比=卫生材料费/医疗总费用;</div>
			</div>
			<div class="formula-description-bottom">
				<span v-html="card1.text1Html"></span>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	// 组件名称
	name: 'pageTile4',
	// 组件参数 接收来自父组件的数据
	props: {

	},
	// 局部注册的组件
	components: {},
	// 组件状态值
	data () {
		return {
			card1: {},
			formData: [{
				name: "医疗服务能力",
				list2: [],
				list3: [],
			}, {
				name: "医疗效率",
				list2: [],
				list3: [],
			}, {
				name: "结算指标",
				list2: [],
				list3: [],
			}]
		}
	},
	// 计算属性
	computed: {},
	// 侦听器
	watch: {},
	// 组件方法
	methods: {
		init (data) {
			let data_list = data.data_list;
			if (data_list.length === 0) return;
			//医疗服务能力
			let formData1 = data_list.slice(0, 6);
			let formData1Key = formData1.map(item => item['指标']);
			let formData1Value = formData1.map(item => item['值']);
			this.formData[0].list2 = formData1Key;
			this.formData[0].list3 = formData1Value;
			//医疗效率
			let formData2 = data_list.slice(6, 13);
			let formData2Key = formData2.map(item => item['指标']);
			let formData2Value = formData2.map(item => item['值']);
			this.formData[1].list2 = formData2Key;
			this.formData[1].list3 = formData2Value;
			//结算指标
			let formData3 = data_list.slice(13, 19);
			let formData3Key = formData3.map(item => item['指标']);
			let formData3Value = formData3.map(item => item['值']);
			this.formData[2].list2 = formData3Key;
			this.formData[2].list3 = formData3Value;
			this.card1 = {
				text1Html: data.desc,
			}
		}
	},
	created () {
	},
	mounted () {
	},
}
</script>

<style lang="less" scoped>
	.page-tile-4 {
		display: flex;
		height: 100%;
		.page-tile-4-left {
			width: 45%;
			border: 1px solid #000;
			.title-box {
				display: flex;
				height: 5%;
				font-size: 1.5rem;
				color: #fff;
				.title-box-1 {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 10%;
					height: 100%;
					background: #4874cb;
					border: 1px solid #000;
				}
				.title-box-2 {
					display: flex;
					align-items: center;
					width: 45%;
					background: #4874cb;
					text-indent: 20px;
					border: 1px solid #000;
				}
				.title-box-3 {
					display: flex;
					align-items: center;
					width: 45%;
					text-indent: 20px;
					background: #4874cb;
					border: 1px solid #000;
				}
			}
			.title-content-box {
				display: flex;
				flex-direction: column;
				height: 95%;
				.title-content {
					display: flex;
					font-size: 1.7rem;
					width: 100%;
					flex: 1;
					.title-content-name {
						padding: 35px;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 10%;
						height: 100%;
						color: #fff;
						background: #4874cb;
						box-sizing: border-box;
						border: 1px solid #000;
					}
					.title-content-list-box {
						display: flex;
						flex-direction: column;
						width: 90%;
						.title-content-list {
							flex: 1;
							display: flex;
							.title-content-list-1-item {
								display: flex;
								align-items: center;
								width: 50%;
								text-indent: 20px;
								border: 1px solid #000;
							}
							.title-content-list-2-item {
								display: flex;
								align-items: center;
								width: 50%;
								text-indent: 20px;
								border: 1px solid #000;
							}
						}
					}
				}
			}
		}
		.page-tile-4-right {
			padding: 2%;
			margin-left: 1%;
			width: 54%;
			border: 1px solid #4874cb;
			.formula-description-top {
				font-size: 1.7rem;
				line-height: 50px;
			}
			.formula-description-bottom {
				padding: 2%;
				margin: 40% auto;
				font-size: 1.7rem;
				line-height: 50px;
				background: #fff2ca;
				border-radius: 32px;
				border: 1px solid #000;
				.color-tips {
					color: #e54c5e;
				}
			}
		}
	}
</style>
